<!-- dailyLife.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>日常生活</title>
  <link rel="stylesheet" href="css/style.css" />
  <!-- 引入 lightbox 样式 -->
  <link rel="stylesheet" href="css/lightbox.css" />
</head>
<body>
  <!-- 导航 -->
  <div class="header">
    <!-- logo -->
    <div class="logo">
      <h3>月下仙连的个人网页</h3>
    </div>
    <!-- 导航栏 -->
    <div class="nav"> 
      <a href="index.html">首页</a>
      <a href="about.html">个人介绍</a>
      <a href="offering.html">个人作品</a>
      <a href="dailyLife.html" class="active">日常生活</a>
      <a href="contactMe.html">联系我</a>
    </div>
  </div>
<!-- 内容区域 -->
 <div class="about">
    <!-- 图片展示区域 -->
  <div class="gallery">
    <img src="img/daily1.jpg" alt="日常照片1" class="lightbox-trigger" data-caption="校园生活">
    <img src="img/daily2.jpg" alt="日常照片2" class="lightbox-trigger" data-caption="朋友聚会">
    <img src="img/daily3.jpg" alt="日常照片3" class="lightbox-trigger" data-caption="旅行风景">
  </div>

  <!-- 模态框容器 -->
  <div id="lightbox-modal" class="lightbox-modal">
    <span class="lightbox-close">&times;</span>
    <img class="lightbox-img" />
    <div class="lightbox-caption"></div>
  </div>

  <!-- 引入 lightbox.js -->
  <script src="js/lightbox.js"></script>
 </div>

</body>
</html>